<template>
  <div class="container mx-auto">
    <!-- 页面标题 -->
    <div class="mb-6">
      <p class="text-gray-500 mt-1">配置平台参数和管理系统功能</p>
    </div>

    <!-- 设置选项卡 -->
    <div class="bg-white rounded-lg shadow mb-6">
      <div class="border-b border-gray-200">
        <nav class="-mb-px flex" aria-label="Tabs">
          <button
              class="mr-8 py-4 px-1 border-emerald-500 text-emerald-600 whitespace-nowrap font-medium text-sm border-b-2"
              @click="activeTab = 'basic'"
          >
            基本设置
          </button>
          <button
              class="mr-8 py-4 px-1 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap font-medium text-sm border-b-2"
              @click="activeTab = 'security'"
          >
            安全设置
          </button>
          <button
              class="mr-8 py-4 px-1 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap font-medium text-sm border-b-2"
              @click="activeTab = 'notifications'"
          >
            通知设置
          </button>
          <button
              class="py-4 px-1 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap font-medium text-sm border-b-2"
              @click="activeTab = 'roles'"
          >
            角色权限
          </button>
        </nav>
      </div>

      <!-- 基本设置 -->
      <div v-if="activeTab === 'basic'" class="p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">平台基本信息</h3>

        <form @submit.prevent="saveSettings">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">平台名称 <span class="text-red-500">*</span></label>
              <input
                  type="text"
                  v-model="settings.siteName"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  required
              >
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">平台域名</label>
              <input
                  type="text"
                  v-model="settings.siteDomain"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              >
            </div>

            <div class="md:col-span-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">平台描述</label>
              <textarea
                  v-model="settings.siteDescription"
                  rows="3"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              ></textarea>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">碳积分单价范围 - 最小值 (¥)</label>
              <input
                  type="number"
                  step="0.01"
                  min="0"
                  v-model="settings.minCreditPrice"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              >
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">碳积分单价范围 - 最大值 (¥)</label>
              <input
                  type="number"
                  step="0.01"
                  min="0"
                  v-model="settings.maxCreditPrice"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              >
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">默认每页显示条数</label>
              <select
                  v-model="settings.pageSize"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              >
                <option value="10">10条/页</option>
                <option value="20">20条/页</option>
                <option value="50">50条/页</option>
                <option value="100">100条/页</option>
              </select>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">数据保留期限 (天)</label>
              <input
                  type="number"
                  min="0"
                  v-model="settings.dataRetentionDays"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  placeholder="0表示永久保留"
              >
            </div>
          </div>

          <div class="border-t border-gray-200 pt-4">
            <h3 class="text-lg font-medium text-gray-900 mb-4">平台状态设置</h3>

            <div class="space-y-4 mb-6">
              <div class="flex items-center">
                <input
                    type="checkbox"
                    id="siteEnabled"
                    v-model="settings.siteEnabled"
                    class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                >
                <label for="siteEnabled" class="ml-2 text-sm text-gray-700">启用平台访问</label>
              </div>

              <div class="flex items-center">
                <input
                    type="checkbox"
                    id="registrationEnabled"
                    v-model="settings.registrationEnabled"
                    class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                >
                <label for="registrationEnabled" class="ml-2 text-sm text-gray-700">允许新用户注册</label>
              </div>

              <div class="flex items-center">
                <input
                    type="checkbox"
                    id="companyRegistrationEnabled"
                    v-model="settings.companyRegistrationEnabled"
                    class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                >
                <label for="companyRegistrationEnabled" class="ml-2 text-sm text-gray-700">允许新厂商注册</label>
              </div>

              <div v-if="!settings.siteEnabled" class="mt-4 p-4 bg-amber-50 border border-amber-100 rounded-lg">
                <label class="block text-sm font-medium text-amber-800 mb-1">平台关闭提示信息</label>
                <textarea
                    v-model="settings.siteClosedMessage"
                    rows="2"
                    class="w-full px-3 py-2 border border-amber-200 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 bg-white"
                    placeholder="当平台关闭时显示给用户的提示信息..."
                ></textarea>
              </div>
            </div>
          </div>

          <div class="flex justify-end">
            <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors">
              保存设置
            </button>
          </div>
        </form>
      </div>

      <!-- 安全设置 -->
      <div v-if="activeTab === 'security'" class="p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">账户安全设置</h3>

        <form @submit.prevent="saveSecuritySettings">
          <div class="space-y-6 mb-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">密码策略</label>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="flex items-center">
                    <input
                        type="checkbox"
                        v-model="securitySettings.passwordRequireUppercase"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                    >
                    <span class="ml-2 text-sm text-gray-700">需要包含大写字母</span>
                  </label>
                </div>
                <div>
                  <label class="flex items-center">
                    <input
                        type="checkbox"
                        v-model="securitySettings.passwordRequireNumber"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                    >
                    <span class="ml-2 text-sm text-gray-700">需要包含数字</span>
                  </label>
                </div>
                <div>
                  <label class="flex items-center">
                    <input
                        type="checkbox"
                        v-model="securitySettings.passwordRequireSpecial"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                    >
                    <span class="ml-2 text-sm text-gray-700">需要包含特殊字符</span>
                  </label>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">最小密码长度</label>
                  <input
                      type="number"
                      min="6"
                      v-model="securitySettings.passwordMinLength"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  >
                </div>
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">会话设置</label>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">自动登录有效期 (天)</label>
                  <input
                      type="number"
                      min="1"
                      v-model="securitySettings.autoLoginDays"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">会话超时时间 (分钟)</label>
                  <input
                      type="number"
                      min="5"
                      v-model="securitySettings.sessionTimeoutMinutes"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  >
                </div>
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">登录限制</label>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">最大失败次数</label>
                  <input
                      type="number"
                      min="1"
                      v-model="securitySettings.maxFailedAttempts"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">锁定时间 (分钟)</label>
                  <input
                      type="number"
                      min="5"
                      v-model="securitySettings.lockoutMinutes"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  >
                </div>
              </div>
            </div>

            <div class="border-t border-gray-200 pt-4">
              <label class="flex items-center">
                <input
                    type="checkbox"
                    v-model="securitySettings.enableTwoFactor"
                    class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                >
                <span class="ml-2 text-sm text-gray-700">启用双因素认证</span>
              </label>
            </div>
          </div>

          <div class="flex justify-end">
            <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors">
              保存安全设置
            </button>
          </div>
        </form>
      </div>

      <!-- 通知设置 -->
      <div v-if="activeTab === 'notifications'" class="p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">通知配置</h3>

        <form @submit.prevent="saveNotificationSettings">
          <div class="space-y-6 mb-6">
            <div class="p-4 bg-blue-50 border border-blue-100 rounded-lg mb-6">
              <h4 class="font-medium text-blue-800 flex items-center">
                <i class="fa fa-info-circle mr-2"></i> 通知渠道设置
              </h4>
              <p class="text-sm text-blue-700 mt-1">配置系统通知的发送渠道和模板</p>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-3">邮件通知</label>

              <div class="flex items-center mb-4">
                <input
                    type="checkbox"
                    id="enableEmail"
                    v-model="notificationSettings.enableEmail"
                    class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                >
                <label for="enableEmail" class="ml-2 text-sm text-gray-700">启用邮件通知</label>
              </div>

              <div v-if="notificationSettings.enableEmail" class="pl-6 space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">SMTP 服务器</label>
                  <input
                      type="text"
                      v-model="notificationSettings.smtpServer"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      placeholder="例如：smtp.qq.com"
                  >
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">SMTP 端口</label>
                    <input
                        type="number"
                        v-model="notificationSettings.smtpPort"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                        placeholder="例如：465（SSL）、587（TLS）"
                    >
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">加密方式</label>
                    <select
                        v-model="notificationSettings.smtpEncryption"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    >
                      <option value="none">无</option>
                      <option value="ssl">SSL</option>
                      <option value="tls">TLS</option>
                    </select>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">发送邮箱账号</label>
                    <input
                        type="email"
                        v-model="notificationSettings.smtpUsername"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    >
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">发送邮箱密码/授权码</label>
                    <input
                        type="password"
                        v-model="notificationSettings.smtpPassword"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    >
                  </div>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">发件人名称</label>
                  <input
                      type="text"
                      v-model="notificationSettings.smtpSenderName"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      placeholder="例如：碳积分管理平台"
                  >
                </div>
                <button
                    type="button"
                    class="px-4 py-2 bg-blue-100 text-blue-800 rounded-md hover:bg-blue-200 transition-colors"
                    @click="sendTestEmail"
                >
                  <i class="fa fa-paper-plane mr-2"></i> 发送测试邮件
                </button>
              </div>
            </div>

            <div class="border-t border-gray-200 pt-6">
              <label class="block text-sm font-medium text-gray-700 mb-3">短信通知</label>

              <div class="flex items-center mb-4">
                <input
                    type="checkbox"
                    id="enableSms"
                    v-model="notificationSettings.enableSms"
                    class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                >
                <label for="enableSms" class="ml-2 text-sm text-gray-700">启用短信通知</label>
              </div>

              <div v-if="notificationSettings.enableSms" class="pl-6 space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">短信服务商</label>
                  <select
                      v-model="notificationSettings.smsProvider"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  >
                    <option value="">请选择服务商</option>
                    <option value="aliyun">阿里云短信</option>
                    <option value="tencent">腾讯云短信</option>
                    <option value="huawei">华为云短信</option>
                  </select>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">API 密钥 ID</label>
                    <input
                        type="text"
                        v-model="notificationSettings.smsAccessKey"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    >
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">API 密钥 Secret</label>
                    <input
                        type="password"
                        v-model="notificationSettings.smsSecretKey"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    >
                  </div>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">短信签名</label>
                  <input
                      type="text"
                      v-model="notificationSettings.smsSignName"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      placeholder="需在服务商平台备案的签名"
                  >
                </div>
                <button
                    type="button"
                    class="px-4 py-2 bg-blue-100 text-blue-800 rounded-md hover:bg-blue-200 transition-colors"
                    @click="sendTestSms"
                >
                  <i class="fa fa-mobile mr-2"></i> 发送测试短信
                </button>
              </div>
            </div>

            <div class="border-t border-gray-200 pt-6">
              <label class="block text-sm font-medium text-gray-700 mb-3">通知模板设置</label>

              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">用户注册通知模板</label>
                  <textarea
                      v-model="notificationSettings.templates.register"
                      rows="3"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      placeholder="欢迎 {{username}} 注册碳积分管理平台，您的账号已激活，可直接登录使用。"
                  ></textarea>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">密码重置通知模板</label>
                  <textarea
                      v-model="notificationSettings.templates.passwordReset"
                      rows="3"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      placeholder="您的密码已重置为：{{defaultPassword}}，请登录后及时修改密码。"
                  ></textarea>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">碳积分交易通知模板</label>
                  <textarea
                      v-model="notificationSettings.templates.transaction"
                      rows="3"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      placeholder="您于 {{time}} 完成一笔碳积分交易，交易金额：{{amount}} 元，当前可用积分：{{availableCredits}}。"
                  ></textarea>
                </div>
              </div>
            </div>
          </div>

          <div class="flex justify-end">
            <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors">
              保存通知设置
            </button>
          </div>
        </form>
      </div>

      <!-- 角色权限 -->
      <div v-if="activeTab === 'roles'" class="p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
          <h3 class="text-lg font-medium text-gray-900">角色与权限管理</h3>
          <button
              class="mt-4 sm:mt-0 px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors flex items-center"
              @click="openAddRoleModal"
          >
            <i class="fa fa-plus mr-2"></i> 新增角色
          </button>
        </div>

        <!-- 角色列表 -->
        <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色名称</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色描述</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户数量</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="role in roles" :key="role.id" class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">{{ role.name }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-500">{{ role.description }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ role.userCount }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ role.createTime }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <button
                    class="text-blue-600 hover:text-blue-900 mr-3"
                    @click="editRole(role)"
                >
                  编辑权限
                </button>
                <button
                    class="text-amber-600 hover:text-amber-900 mr-3"
                    @click="assignUsers(role)"
                >
                  分配用户
                </button>
                <button
                    class="text-red-600 hover:text-red-900"
                    @click="deleteRole(role.id)"
                    :disabled="role.name === '超级管理员'"
                >
                  删除
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <!-- 权限说明 -->
        <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
          <h4 class="font-medium text-gray-800 mb-2">权限说明</h4>
          <ul class="text-sm text-gray-600 space-y-1">
            <li class="flex items-start">
              <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
              <span>查看权限：仅能查看对应模块的数据，无修改权限</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
              <span>编辑权限：可修改对应模块的数据，但无删除权限</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
              <span>完全权限：拥有对应模块的查看、编辑、删除、新增全量权限</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-exclamation-circle text-amber-500 mt-0.5 mr-2"></i>
              <span>超级管理员角色为系统默认角色，不可删除和修改权限范围</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增/编辑角色弹窗 -->
  <div v-if="showRoleModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl p-6 transform transition-all">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">{{ isEditRole ? '编辑角色权限' : '新增角色' }}</h3>
        <button @click="showRoleModal = false" class="text-gray-400 hover:text-gray-500">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <form @submit.prevent="saveRole">
        <div class="space-y-4 mb-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">角色名称 <span class="text-red-500">*</span></label>
            <input
                type="text"
                v-model="currentRole.name"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                required
                :disabled="isEditRole && currentRole.name === '超级管理员'"
            >
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">角色描述</label>
            <textarea
                v-model="currentRole.description"
                rows="2"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                :disabled="isEditRole && currentRole.name === '超级管理员'"
            ></textarea>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-3">权限分配</label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <!-- 权限分组：系统管理 -->
              <div class="border border-gray-200 rounded-lg p-3">
                <h4 class="font-medium text-gray-800 mb-2 flex items-center">
                  <i class="fa fa-cog text-gray-500 mr-2"></i> 系统管理
                </h4>
                <div class="space-y-2 pl-2">
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.system.view"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">查看系统</span>
                  </label>
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.system.edit"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">编辑系统配置</span>
                  </label>
                </div>
              </div>

              <!-- 权限分组：厂商管理 -->
              <div class="border border-gray-200 rounded-lg p-3">
                <h4 class="font-medium text-gray-800 mb-2 flex items-center">
                  <i class="fa fa-industry text-gray-500                  mr-2"></i> 厂商管理
                </h4>
                <div class="space-y-2 pl-2">
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.company.view"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">查看厂商</span>
                  </label>
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.company.edit"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">编辑厂商信息</span>
                  </label>
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.company.delete"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">删除厂商</span>
                  </label>
                </div>
              </div>

              <!-- 权限分组：用户管理 -->
              <div class="border border-gray-200 rounded-lg p-3">
                <h4 class="font-medium text-gray-800 mb-2 flex items-center">
                  <i class="fa fa-users text-gray-500 mr-2"></i> 用户管理
                </h4>
                <div class="space-y-2 pl-2">
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.user.view"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">查看用户</span>
                  </label>
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.user.edit"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">编辑用户信息</span>
                  </label>
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.user.delete"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">删除用户</span>
                  </label>
                </div>
              </div>

              <!-- 权限分组：交易管理 -->
              <div class="border border-gray-200 rounded-lg p-3">
                <h4 class="font-medium text-gray-800 mb-2 flex items-center">
                  <i class="fa fa-exchange text-gray-500 mr-2"></i> 交易管理
                </h4>
                <div class="space-y-2 pl-2">
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.transaction.view"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">查看交易记录</span>
                  </label>
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.transaction.audit"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">审核交易</span>
                  </label>
                  <label class="flex items-center text-sm">
                    <input
                        type="checkbox"
                        v-model="currentRole.permissions.transaction.export"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                        :disabled="isEditRole && currentRole.name === '超级管理员'"
                    >
                    <span class="ml-2 text-gray-700">导出交易数据</span>
                  </label>
                </div>
              </div>
            </div>
          </div>


          <div class="flex justify-end space-x-3">
            <button
                type="button"
                class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
                @click="showRoleModal = false"
            >
              取消
            </button>
            <button
                type="submit"
                class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors"
                :disabled="isEditRole && currentRole.name === '超级管理员'"
            >
              {{ isEditRole ? '更新角色' : '创建角色' }}
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- 分配用户弹窗 -->
  <div v-if="showAssignUserModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-3xl p-6 transform transition-all">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">为「{{ currentAssignRole.name }}」分配用户</h3>
        <button @click="showAssignUserModal = false" class="text-gray-400 hover:text-gray-500">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="space-y-6">
        <!-- 搜索用户 -->
        <div class="flex items-center space-x-2">
          <input
              type="text"
              v-model="userSearchKeyword"
              placeholder="搜索用户名/手机号/邮箱"
              class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              @input="searchUsers"
          >
          <button
              class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors"
              @click="searchUsers"
          >
            <i class="fa fa-search mr-1"></i> 搜索
          </button>
        </div>

        <!-- 用户列表 -->
        <div class="border border-gray-200 rounded-lg overflow-hidden max-h-[400px] overflow-y-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50 sticky top-0 z-10">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12">
                <input
                    type="checkbox"
                    v-model="selectAllUsers"
                    class="rounded border-gray-300 text-emerald-600 shadow-sm"
                    @change="toggleSelectAllUsers"
                >
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">手机号</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">邮箱</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当前角色</th>
            </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="user in filteredUsers" :key="user.id" class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap">
                <input
                    type="checkbox"
                    :value="user.id"
                    v-model="selectedUserIds"
                    class="rounded border-gray-300 text-emerald-600 shadow-sm"
                    :disabled="user.id === 1"
                >
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <img
                      :src="user.avatar"
                      alt="用户头像"
                      class="w-8 h-8 rounded-full mr-3 object-cover"
                  >
                  <div class="text-sm font-medium text-gray-900">{{ user.username }}</div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ user.phone || '-' }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ user.email || '-' }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                      {{ user.currentRole || '未分配' }}
                    </span>
              </td>
            </tr>
            <tr v-if="filteredUsers.length === 0">
              <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">
                未找到匹配的用户
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <div class="flex justify-end space-x-3">
          <button
              type="button"
              class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
              @click="showAssignUserModal = false"
          >
            取消
          </button>
          <button
              type="button"
              class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors"
              @click="confirmAssignUsers"
              :disabled="selectedUserIds.length === 0"
          >
            <i class="fa fa-check mr-1"></i> 确认分配
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';

// 激活的选项卡
const activeTab = ref('basic');

// 基本设置数据
const settings = reactive({
  siteName: '碳积分管理平台',
  siteDomain: 'https://carbon-credit.example.com',
  siteDescription: '专注于碳积分交易管理的绿色环保平台，连接厂商与用户，推动可持续发展',
  minCreditPrice: 58.6,
  maxCreditPrice: 62.8,
  pageSize: '20',
  dataRetentionDays: 365,
  siteEnabled: true,
  registrationEnabled: true,
  companyRegistrationEnabled: true,
  siteClosedMessage: '平台正在维护升级，预计1小时后恢复访问，给您带来不便敬请谅解！'
});

// 安全设置数据
const securitySettings = reactive({
  passwordRequireUppercase: true,
  passwordRequireNumber: true,
  passwordRequireSpecial: true,
  passwordMinLength: 8,
  autoLoginDays: 7,
  sessionTimeoutMinutes: 30,
  maxFailedAttempts: 5,
  lockoutMinutes: 15,
  enableTwoFactor: false
});

// 通知设置数据
const notificationSettings = reactive({
  enableEmail: true,
  smtpServer: 'smtp.qq.com',
  smtpPort: 465,
  smtpEncryption: 'ssl',
  smtpUsername: 'admin@carbon-credit.example.com',
  smtpPassword: 'xxxxxxxxxxxx', // 实际项目中需加密存储
  smtpSenderName: '碳积分管理平台',
  enableSms: false,
  smsProvider: '',
  smsAccessKey: '',
  smsSecretKey: '',
  smsSignName: '',
  templates: {
    register: '欢迎 {{username}} 注册碳积分管理平台，您的账号已激活，可直接登录使用。',
    passwordReset: '您的密码已重置为：{{defaultPassword}}，请登录后及时修改密码。',
    transaction: '您于 {{time}} 完成一笔碳积分交易，交易金额：{{amount}} 元，当前可用积分：{{availableCredits}}。'
  }
});

// 角色权限数据
const roles = ref([
  {
    id: 1,
    name: '超级管理员',
    description: '系统最高权限角色，拥有所有模块的操作权限',
    userCount: 1,
    createTime: '2025-01-01'
  },
  {
    id: 2,
    name: '系统管理员',
    description: '负责系统配置和用户管理，无厂商删除权限',
    userCount: 3,
    createTime: '2025-01-10'
  },
  {
    id: 3,
    name: '审核员',
    description: '负责交易审核和数据查看，无编辑和删除权限',
    userCount: 5,
    createTime: '2025-02-15'
  }
]);

// 角色弹窗相关
const showRoleModal = ref(false);
const isEditRole = ref(false);
const currentRole = reactive({
  id: '',
  name: '',
  description: '',
  permissions: {
    system: { view: false, edit: false },
    company: { view: false, edit: false, delete: false },
    user: { view: false, edit: false, delete: false },
    transaction: { view: false, audit: false, export: false }
  }
});

// 分配用户弹窗相关
const showAssignUserModal = ref(false);
const currentAssignRole = ref({ name: '' });
const userSearchKeyword = ref('');
const filteredUsers = ref([
  {
    id: 1,
    username: 'admin',
    avatar: 'https://picsum.photos/id/1005/40/40',
    phone: '13800138000',
    email: 'admin@carbon-credit.example.com',
    currentRole: '超级管理员'
  },
  {
    id: 2,
    username: 'system1',
    avatar: 'https://picsum.photos/id/1012/40/40',
    phone: '13900139000',
    email: 'system1@carbon-credit.example.com',
    currentRole: '系统管理员'
  },
  {
    id: 3,
    username: 'auditor1',
    avatar: 'https://picsum.photos/id/1027/40/40',
    phone: '13700137000',
    email: 'auditor1@carbon-credit.example.com',
    currentRole: '审核员'
  },
  {
    id: 4,
    username: 'zhangsan',
    avatar: 'https://picsum.photos/id/1014/40/40',
    phone: '13600136000',
    email: 'zhangsan@example.com',
    currentRole: '未分配'
  },
  {
    id: 5,
    username: 'lisi',
    avatar: 'https://picsum.photos/id/1015/40/40',
    phone: '13500135000',
    email: 'lisi@example.com',
    currentRole: '未分配'
  }
]);
const selectedUserIds = ref([]);
const selectAllUsers = ref(false);

// 保存基本设置
const saveSettings = () => {
  // 实际项目中需调用接口保存数据
  alert('基本设置已保存！');
};

// 保存安全设置
const saveSecuritySettings = () => {
  // 实际项目中需调用接口保存数据
  alert('安全设置已保存！');
};

// 保存通知设置
const saveNotificationSettings = () => {
  // 实际项目中需调用接口保存数据
  alert('通知设置已保存！');
};

// 发送测试邮件
const sendTestEmail = () => {
  // 实际项目中需调用接口发送测试邮件
  alert('测试邮件已发送至管理员邮箱！');
};

// 发送测试短信
const sendTestSms = () => {
  // 实际项目中需调用接口发送测试短信
  alert('测试短信已发送至管理员手机！');
};

// 打开新增角色弹窗
const openAddRoleModal = () => {
  // 重置当前角色数据
  currentRole.id = '';
  currentRole.name = '';
  currentRole.description = '';
  currentRole.permissions = {
    system: { view: false, edit: false },
    company: { view: false, edit: false, delete: false },
    user: { view: false, edit: false, delete: false },
    transaction: { view: false, audit: false, export: false }
  };
  isEditRole.value = false;
  showRoleModal.value = true;
};

// 编辑角色
const editRole = (role) => {
  // 模拟获取角色权限（实际项目中需接口请求）
  const mockPermissions = role.name === '超级管理员'
      ? {
        system: { view: true, edit: true },
        company: { view: true, edit: true, delete: true },
        user: { view: true, edit: true, delete: true },
        transaction: { view: true, audit: true, export: true }
      }
      : role.name === '系统管理员'
          ? {
            system: { view: true, edit: true },
            company: { view: true, edit: true, delete: false },
            user: { view: true, edit: true, delete: true },
            transaction: { view: true, audit: true, export: true }
          }
          : {
            system: { view: true, edit: false },
            company: { view: true, edit: false, delete: false },
            user: { view: true, edit: false, delete: false },
            transaction: { view: true, audit: true, export: true }
          };

  // 赋值当前角色数据
  currentRole.id = role.id;
  currentRole.name = role.name;
  currentRole.description = role.description;
  currentRole.permissions = mockPermissions;
  isEditRole.value = true;
  showRoleModal.value = true;
};

// 保存角色
const saveRole = () => {
  if (isEditRole.value) {
    // 编辑角色：更新现有角色
    const index = roles.value.findIndex(r => r.id === currentRole.id);
    if (index !== -1) {
      roles.value[index].name = currentRole.name;
      roles.value[index].description = currentRole.description;
    }
    alert('角色已更新！');
  } else {
    // 新增角色：生成新角色ID并添加到列表
    const newRole = {
      id: Math.max(...roles.value.map(r => r.id)) + 1,
      name: currentRole.name,
      description: currentRole.description,
      userCount: 0,
      createTime: new Date().toISOString().split('T')[0]
    };
    roles.value.push(newRole);
    alert('新角色已创建！');
  }
  showRoleModal.value = false;
};

// 删除角色
const deleteRole = (roleId) => {
  if (confirm('确定要删除此角色吗？删除后将无法恢复！')) {
    roles.value = roles.value.filter(r => r.id !== roleId);
    alert('角色已删除！');
  }
};

// 分配用户
const assignUsers = (role) => {
  currentAssignRole.value = role;
  selectedUserIds.value = [];
  selectAllUsers.value = false;
  showAssignUserModal.value = true;
};

// 搜索用户
const searchUsers = () => {
  // 实际项目中需调用接口搜索用户，此处模拟本地过滤
  const keyword = userSearchKeyword.value.trim().toLowerCase();
  if (!keyword) {
    // 无搜索关键词时显示所有用户（此处使用模拟数据的副本）
    filteredUsers.value = [
      {
        id: 1,
        username: 'admin',
        avatar: 'https://picsum.photos/id/1005/40/40',
        phone: '13800138000',
        email: 'admin@carbon-credit.example.com',
        currentRole: '超级管理员'
      },
      {
        id: 2,
        username: 'system1',
        avatar: 'https://picsum.photos/id/1012/40/40',
        phone: '13900139000',
        email: 'system1@carbon-credit.example.com',
        currentRole: '系统管理员'
      },
      {
        id: 3,
        username: 'auditor1',
        avatar: 'https://picsum.photos/id/1027/40/40',
        phone: '13700137000',
        email: 'auditor1@carbon-credit.example.com',
        currentRole: '审核员'
      },
      {
        id: 4,
        username: 'zhangsan',
        avatar: 'https://picsum.photos/id/1014/40/40',
        phone: '13600136000',
        email: 'zhangsan@example.com',
        currentRole: '未分配'
      },
      {
        id: 5,
        username: 'lisi',
        avatar: 'https://picsum.photos/id/1015/40/40',
        phone: '13500135000',
        email: 'lisi@example.com',
        currentRole: '未分配'
      }
    ];
    return;
  }

  // 按用户名、手机号、邮箱过滤
  filteredUsers.value = filteredUsers.value.filter(user =>
      user.username.toLowerCase().includes(keyword) ||
      (user.phone && user.phone.includes(keyword)) ||
      (user.email && user.email.toLowerCase().includes(keyword))
  );
};

// 全选/取消全选用户
const toggleSelectAllUsers = () => {
  if (selectAllUsers.value) {
    // 全选：排除超级管理员（id=1）
    selectedUserIds.value = filteredUsers.value
        .filter(user => user.id !== 1)
        .map(user => user.id);
  } else {
    // 取消全选
    selectedUserIds.value = [];
  }
};

// 监听已选用户变化，同步全选状态
watch(selectedUserIds, (newVal) => {
  const availableUsers = filteredUsers.value.filter(user => user.id !== 1);
  selectAllUsers.value = availableUsers.length > 0 && newVal.length === availableUsers.length;
});

// 确认分配用户
const confirmAssignUsers = () => {
  // 实际项目中需调用接口分配角色
  alert(`已为「${currentAssignRole.value.name}」分配 ${selectedUserIds.value.length} 名用户！`);

  // 模拟更新用户当前角色
  filteredUsers.value = filteredUsers.value.map(user => {
    if (selectedUserIds.value.includes(user.id)) {
      return { ...user, currentRole: currentAssignRole.value.name };
    }
    return user;
  });

  showAssignUserModal.value = false;
};
</script>

<style scoped>
/* 选项卡切换动画 */
.tab-enter-active, .tab-leave-active {
  transition: opacity 0.3s ease;
}
.tab-enter-from, .tab-leave-to {
  opacity: 0;
}

/* 表单元素聚焦样式优化 */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* 弹窗动画 */
.modal-enter-active {
  animation: modalFadeIn 0.3s ease-out;
}
.modal-leave-active {
  animation: modalFadeOut 0.3s ease-in;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
</style>